<form [formGroup]="formGroup" class="flex flex-col space-y-2">
  <div>
    <div class="py-2 leading-5 font-medium">
      {{ 'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} }} <span class="ml-1 text-red-500">*</span>
    </div>
    <div class="flex items-center justify-between gap-3">
      <emoji-avatar class="rounded-lg overflow-hidden"
        [(avatar)]="avatar" editable />
      <input class="ngm-input h-10 px-3 text-base font-normal grow"
        [placeholder]="'PAC.Xpert.EnterToolsetName' | translate: {Default: 'Enter the toolset name'}"
        formControlName="name"
        [ngClass]="{error: name.invalid && (name.dirty || name.touched)}">
    </div>

    <textarea formControlName="description"
      class="w-full px-2 py-1 mt-2 text-sm outline-none rounded-lg border border-solid border-transparent active:border-divider-regular focus-within:border-divider-regular
        bg-gray-50 focus-within:bg-gray-100"
      [placeholder]="'PAC.Xpert.EnterToolsetDescription' | translate: {Default: 'Enter toolset description'} "
    ></textarea>
  </div>
  <div class="select-none relative">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <div class="py-2 leading-5 font-medium">
          {{ 'PAC.Xpert.Schema' | translate: {Default: 'Schema'} }}
          <span class="ml-1 text-red-500">*</span>
        </div>
        <div class="mx-2 w-px h-3 bg-black/5"></div>
        <a href="https://swagger.io/specification/" target="_blank" rel="noopener noreferrer"
          class="flex items-center h-[18px] space-x-1 text-[#155EEF] hover:text-primary-600">
          <div class="text-xs font-normal">{{ 'PAC.Xpert.ViewOpenAPISwaggerSpec' | translate: {Default: 'View the OpenAPI-Swagger Specification'} }}</div>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5">
            <g id="link-external-02">
              <path id="Icon" d="M10.5 4.5L10.5 1.5M10.5 1.5H7.49999M10.5 1.5L6 6M5 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
          </svg>
        </a>
      </div>
      <div class="flex space-x-1 justify-end relative w-[224px]">
        <div >
          <button type="button" class="btn disabled:btn-disabled btn-secondary btn-small space-x-1"
            [cdkMenuTriggerFor]="urlMenu"
            #urlMenuTrigger="cdkMenuTriggerFor">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
              class="w-3 h-3">
              <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
            </svg>
            <div class="text-sm font-medium text-zinc-700">
              {{ 'PAC.Xpert.ImportFromURL' | translate: {Default: 'Import from URL'} }}
            </div>
          </button>

          <ng-template #urlMenu>
            <div cdkMenu class="relative p-2">
              <input class="w-[244px] h-9 pl-1.5 pr-[44px] overflow-x-auto border border-gray-200 rounded-lg text-sm"
                placeholder="https://..."
                type="text"
                [(ngModel)]="url" [ngModelOptions]="{standalone: true}" >
              <button type="button" class="btn disabled:btn-disabled btn-primary btn-small text-sm absolute top-3 right-3"
                [disabled]="!url()"
                (click)="urlMenuTrigger.close(); getMetadata();">{{ 'PAC.Xpert.Ok' | translate: {Default: 'Ok'} }}</button>
            </div>
          </ng-template>
        </div>
        <div class="relative">
          <button type="button" class="btn disabled:btn-disabled btn-secondary btn-small space-x-1"
            [cdkMenuTriggerFor]="sampleMenu"
            #sampleMenuTrigger="cdkMenuTriggerFor">
            <div class="text-sm font-medium">{{ 'PAC.Xpert.Samples' | translate: {Default: 'Samples'} }}</div>
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
              class="w-3 h-3">
              <path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>
            </svg>
          </button>

          <ng-template #sampleMenu>
            <div cdkMenu class="relative p-2">
              @for (sample of eSamples | entries; track sample[0]) {
                <button type="button" cdkMenuItem class="rounded-lg px-4 py-2"
                  (click)="sampleMenuTrigger.close(); triggerSample(sample[0])"
                >
                  {{ 'PAC.Xpert.ODataSamples.' + sample[0] + '.name' | translate: { Default: sample[1].name } }}
                </button>
              }
            </div>
          </ng-template>
        </div>
      </div>
    </div>
    <textarea class="ngm-input w-full h-[240px] px-3 py-2 leading-5 text-sm font-normal rounded-lg overflow-y-auto
        text-gray-900 bg-gray-100"
      [placeholder]="'PAC.Xpert.EnterYourOpenAPISchema' | translate: {Default: 'Enter your OpenAPI schema here'}"
      formControlName="schema"
      [ngClass]="{error: schema.invalid && (schema.dirty || schema.touched)}"
    ></textarea>

    <div formGroupName="options" >
      <div class="py-2 leading-5 text-sm font-medium text-gray-900">
        {{'PAC.Xpert.BaseUrl' | translate: {Default: 'Base Url'} }}
      </div>
      <input matInput class="w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow"
        [placeholder]=" 'PAC.Xpert.EnterBaseUrl' | translate: {Default: 'Please enter base url'} "
        formControlName="baseUrl"
        >
    </div>

    @if (loading()) {
      <ngm-spin class="absolute top-0 left-0 w-full h-full" />
    }
  </div>
  @if (!toolset()) {
    <div>
      <div class="py-2 leading-5 text-base font-medium text-gray-900">
        {{ 'PAC.Xpert.AvailableTools' | translate: {Default: 'Available Tools'} }}
      </div>
      <div class="rounded-lg border border-gray-200 w-full overflow-x-auto">
        <table class="w-full leading-[18px] text-sm text-gray-700 font-normal">
          <thead class="text-gray-500 uppercase">
            <tr class="border-gray-200">
              <th class="">{{'PAC.KEY_WORDS.Enabled' | translate: {Default: 'Enabled'} }}</th>
              <th class="">{{'PAC.KEY_WORDS.Name' | translate: {Default: 'Name'} }}</th>
              <th class=" w-[236px]">{{'PAC.KEY_WORDS.Description' | translate: {Default: 'Description'} }}</th>
              <th class="">{{'PAC.KEY_WORDS.Method' | translate: {Default: 'Method'} }}</th>
              <th class="">{{'PAC.KEY_WORDS.Path' | translate: {Default: 'Path'} }}</th>
              <th class=" w-[54px]">{{'PAC.KEY_WORDS.Actions' | translate: {Default: 'Actions'} }}</th>
            </tr>
          </thead>
          <tbody formArrayName="tools">
            @for (tool of tools.controls; track i; let i = $index) {
              <tr class="border-gray-200" [formGroupName]="i">
                <td class="p-2 pl-3 font-medium">
                  <input formControlName="enabled" id="tool-disabled-{{i}}" type="checkbox"
                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                </td>
                <td class="p-2 pl-3 font-medium">
                  <xpert-tool-name-input formControlName="name" />
                </td>
                <td class="p-2 pl-3 font-medium">
                  <input formControlName="description" class="w-full ngm-input-inline ngm-input-sm">
                </td>
                <td class="p-2 pl-3 font-medium">{{tool.value.options.api_bundle.method}}</td>
                <td class="p-2 pl-3 font-medium">{{tool.value.options.api_bundle.server_url}}</td>
                <td class="pl-3 font-medium">
                  <button type="button" class="btn disabled:btn-disabled btn-secondary btn-small space-x-1"
                    (click)="openToolTest(tool.value)">
                    <div class="text-sm font-medium">{{ 'PAC.Xpert.Test' | translate: {Default: 'Test'} }}</div>
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  }

  <xpert-tool-authorization-input formControlName="credentials" />

  <div>
    <div class="py-2 leading-5 text-sm font-medium text-gray-900">
      {{'PAC.KEY_WORDS.Tags' | translate: {Default: 'Tags'} }}
    </div>
    <tag-select optional [category]="eTagCategoryEnum.TOOLSET" [formControl]="tags"></tag-select>
  </div>
  <div>
    <div class="py-2 leading-5 text-sm font-medium text-gray-900">
      {{'PAC.Xpert.PrivacyPolicy' | translate: {Default: 'Privacy Policy'} }}
    </div>
    <input matInput class="w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow"
      [placeholder]=" 'PAC.Xpert.EnterPrivacyPolicy' | translate: {Default: 'Please enter privacy policy'} "
      formControlName="privacyPolicy"
      >
  </div>
  <div>
    <div class="py-2 leading-5 text-sm font-medium text-gray-900">
      {{'PAC.Xpert.CustomDisclaimer' | translate: {Default: 'Custom Disclaimer'} }}
    </div>
    <input matInput class="w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow"
      [placeholder]=" 'PAC.Xpert.EnterCustomDisclaimer' | translate: {Default: 'Please enter custom disclaimer'} "
      formControlName="customDisclaimer"
      >
  </div>
</form>
